<template>
  <div class="block">
    <div v-show="code === 200 ">
      <div  id="blchart"  v-if="countView" :style="{width: '1000px', height: '600px'}" v-model="webname"></div>
    </div>
    <el-result v-show="code === 400 " title="抱歉，该时间段未获取热搜，请重新选择时间" style="background: white">
      <template slot="icon">
        <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
      </template>
    </el-result>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "BarAndLineChart",
  data(){
    return{
      countView:true,
      code: 200,
    }
  },
  computed:{
    ...mapState(['date','time']),
    //同时监听两个数据
    listenChange () {
      const _this = this
      const date = _this.date
      const time =_this.time
      return {date,time}
    }
  },
  props:['webname'],
  methods: {
    getBarAndLineChartData(){
      const _this = this
      var api
      switch (this.webname){
        case '腾讯新闻' :
          if (_this.date===null&&_this.time===null){
            api =this.$base_url+ 'lineandbarchart/txnewhot';
          } else {
            api =this.$base_url+ 'lineandbarchart/txhot/'+_this.date +'/' +_this.time ;
          }
          break;
        case '今日头条' :
          if (_this.date===null&&_this.time===null){
            api =this.$base_url+ 'lineandbarchart/jrnewhot';
          } else {
            api =this.$base_url+ 'lineandbarchart/jrhot/'+_this.date +'/' +_this.time ;
          }
          break;
        case '百度热搜' :
          if (_this.date===null&&_this.time===null){
            api =this.$base_url+ 'lineandbarchart/bdnewhot';
          } else {
            api = this.$base_url+ 'lineandbarchart/bdhot/'+_this.date +'/' +_this.time ;
          }
          break;
        case '微博热搜' :
          if (_this.date===null&&_this.time===null){
            api =this.$base_url+ 'lineandbarchart/wbnewhot';
          } else {
            api =this.$base_url+ 'lineandbarchart/wbhot/'+_this.date +'/' +_this.time ;
          }
          break;
        default :
          api =this.$base_url+ 'lineandbarchart/wbnewhot';
          break

      }
      this.$axios.get(api).then(res => {
        if (res.data.code===400){
          _this.code=res.data.code
        } else {
          _this.code=res.data.code
          const myChart = _this.$echarts.init(document.getElementById('blchart'))
          // 绘制图表
          myChart.setOption({
            backgroundColor:'#FFFFFF',//背景颜色白色
            title: {
              text: '热搜折现柱状图',
              left: 'center',
              top: 20,
              textStyle: {
                color: '#555555',
              }
            },
            toolbox: {
              show : true,
              feature : {
                /* line是折线图，bar是柱形图*/
                magicType: {show: true, type: ['line', 'bar']},
              }
            },
            tooltip : {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            grid: {
              left: '10%',
              bottom:'35%'
            },
            xAxis: {
              type: 'category',
              data: res.data.data[0].topic,
              axisLabel: {
                interval:0,
                // rotate:-90,
                fontSize: 10,
                formatter:function(val){
                  return val.split("").join("\n");
                }
              }
            },
            yAxis: {
              type: 'value',
              scale:true
            },
            series: [
              {
                data: res.data.data[0].hot,
                type: 'line',
                label: {
                  show: false,
                }
              }
            ]
          })
          myChart.on("click", function(params) {
            window.location.href = res.data.data[0].url[params.dataIndex];

          });
        }
      })
    },
  },
  mounted() {
    if (this.$route.name =='Chart'){
      this.getBarAndLineChartData()
    }
  },
  watch:{
    webname(val) {
      if (this.$route.name =='Chart'){
        this.getBarAndLineChartData()
      }
    },
    listenChange(val){
      if (this.$route.name ==='Chart'){
        const _this = this
        _this.getBarAndLineChartData()
        //获取数据重新刷新页面
        _this.countView=false
        _this.$nextTick(()=>{
          _this.countView=true
        })
      }
    },
  }

}
</script>

<style scoped>
#blchart{
  margin-top: 5px;
}
</style>